import React, { Component, Fragment } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'
import './Show.css'

export default class Show extends Component {
    state = {
        prizeInfo: {}
    }

    componentDidMount() {
        this.token = PubSub.subscribe('prizeInfo', (_, data) => {
            this.setState({ prizeInfo: data })
        })
    }

    componentWillUnmount() {
        PubSub.unsubscribe(this.token);
    }

    // 用户点击‘收下奖品’后，请求服务器将奖品信息添加到记录当中
    confirmPrize = () => {
        axios.get('http://localhost:5000/confirm').then(
            res => {
                // console.log(res.data);
                this.props.changeShowPrize();
            }, err => {
                console.log(err);
            }
        )
    }

    render() {
        const { title, img, isWin } = this.state.prizeInfo;
        return (
            this.props.isShowPrize ?
                <Fragment >
                    <div className="maskBackground"></div>
                    <div className="center showPrize" style={{ boxShadow: isWin ? '0 0 15px yellow' : '' }}>
                        {
                            isWin ?
                                <Fragment>
                                    <span className="win">恭喜您，中奖啦!</span>
                                    <span className='center winName'>{title}</span>
                                    <img src={img} className="showImg" alt="" />
                                    <div onClick={this.confirmPrize} className="center confirm" style={{ backgroundColor: '#fc7120' }}>收下奖品</div>
                                </Fragment>

                                :
                                <Fragment>
                                    <span className="lose">哎呀，就差那么一点点~</span>
                                    <span style={{ fontSize: '20px' }}>别灰心，再来一次！</span>
                                    <img src={img} className="showImg" alt="" />
                                    <div onClick={this.props.changeShowPrize} className="center confirm" style={{ backgroundColor: '#e5553d' }}>再来一次</div>
                                </Fragment>
                        }
                    </div>
                </Fragment>
                :
                null
        )
    }
}
